{extend name="base:base" /}
{block name="body"}
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
    <legend>多文件列表</legend>
</fieldset>

<div class="layui-upload">
    <button type="button" class="layui-btn layui-btn-normal" id="fileList">选择多文件</button>
    <div class="layui-upload-list">
        <table class="layui-table">
            <thead>
            <tr><th>文件名</th>
                <th>大小</th>
                <!--<th>点击预览</th>-->
                <th>状态</th>
                <th>操作</th>
            </tr></thead>
            <tbody id="lists"></tbody>
        </table>
    </div>
    <button type="button" class="layui-btn" id="listAction">开始上传</button>
</div>
{/block}
{block name="script"}
<script type="text/html" id="uploadTpl">
    <tr id="upload-{{ d.index }}">
        <td>{{ d.name }}</td>
        <td>{{ d.size }} kb</td>
        <!--<td><a href="javascript:void(0);" class="preview">预览</a></td>-->
        <td class="upload_status">等待上传</td>
        <td>
            <button type="button" class="layui-btn layui-btn-mini reload layui-hide">重传</button>
            <button type="button" class="layui-btn layui-btn-mini layui-btn-danger delete">删除</button>
        </td>
    </tr>
</script>
<script type="text/javascript">
    UrlHighlight("{:Url::build('Operation/index')}");
    layui.use(['jquery', 'form','upload','laytpl'], function () {
        //多文件列表示例

        var lists = layui.$('#lists'),files;
        layui.upload.render({
            elem: '#fileList',
            url: "{:Url::build('Upload/upload')}",
            accept: 'file',
            multiple: true,
            auto: false,
            bindAction: '#listAction',
            choose: function(obj){
                files = obj.pushFile(); /*将每次选择的文件追加到文件队列*/
                /*读取本地文件*/
                obj.preview(function(index, file, result){
                  var tr= layui.laytpl(uploadTpl.innerHTML).render({
                        "index":index,
                        "name":file.name,
                        "size":(file.size/1014).toFixed(1)
                    });
                    lists.append(tr);
                    //单个重传
                    layui.$('tr#upload-'+ index).find('.reload').on('click', function(){
                        obj.upload(index, file);
                    });
                    //删除
                    layui.$('tr#upload-'+ index).find('.delete').on('click', function(){
                        delete files[index]; //删除对应的文件
                        layui.$('tr#upload-'+ index).remove();
                    });
                    //图片预览
//                    layui.$('tr#upload-'+ index).find('.preview').on('click', function(){
//                        layui.layer.photos({
//                            photos: {"data": [{"src": result}]}
//                        });
//                    });
                });
            },
            done: function(res, index, upload){
                if(res.code == 0){ //上传成功
                    var tr = lists.find('tr#upload-'+ index);
                    tr.find('.upload_status').html('<span style="color: #5FB878;">res.msg</span>');
                    tr.find('.reload').html(''); //清空操作
                    delete files[index]; //删除文件队列已经上传成功的文件
                    return;
                }else {
                    this.error(index, upload);
                }
            },
            error: function(index, upload){
                var tr = lists.find('tr#upload-'+ index);
                tr.find('.upload_status').html('<span style="color: #FF5722;">上传失败</span>');
                tr.find('.reload').removeClass('layui-hide'); //显示重传
            }
        });
    })
</script>

{/block}